<template>
  <div class="login-title">
    <h2 class="title-text">
      {{ getFormTitle }}
    </h2>
    <div class="title-underline"></div>
  </div>
</template>
<script lang="ts" setup>
import { LoginStateEnum, useLoginState } from './useLogin'

defineOptions({ name: 'LoginFormTitle' })

const { t } = useI18n()

const { getLoginState } = useLoginState()

const getFormTitle = computed(() => {
  const titleObj = {
    [LoginStateEnum.RESET_PASSWORD]: t('sys.login.forgetFormTitle'),
    [LoginStateEnum.LOGIN]: t('sys.login.signInFormTitle'),
    [LoginStateEnum.REGISTER]: t('sys.login.signUpFormTitle'),
    [LoginStateEnum.MOBILE]: t('sys.login.mobileSignInFormTitle'),
    [LoginStateEnum.QR_CODE]: t('sys.login.qrSignInFormTitle'),
    [LoginStateEnum.SSO]: t('sys.login.ssoFormTitle')
  }
  return titleObj[unref(getLoginState)]
})
</script>

<style lang="scss" scoped>
.login-title {
  text-align: center;
  margin-bottom: 1rem;
}

.title-text {
  font-size: 2rem;
  font-weight: 700;
  color: white;
  margin: 0;
  letter-spacing: 0.5px;
  background: linear-gradient(135deg, #ffffff 0%, #e0e7ff 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  
  @media (max-width: 640px) {
    font-size: 1.75rem;
  }
}

.title-underline {
  width: 60px;
  height: 3px;
  background: linear-gradient(135deg, #06b6d4 0%, #0891b2 100%);
  margin: 0.75rem auto 0;
  border-radius: 2px;
  animation: slideIn 0.6s ease-out 0.3s both;
}

@keyframes slideIn {
  from {
    width: 0;
    opacity: 0;
  }
  to {
    width: 60px;
    opacity: 1;
  }
}
</style>
